import React, { PureComponent } from 'react';
import PageHeaderLayout from '../../../layouts/PageHeaderLayout';
import {
  Table, Alert,
} from 'antd';

import styles from './index.less';

export default class OrderTable extends PureComponent {
  constructor(props) {
    super(props);
    this.state = {
      selectedRowKeys: [],
    };
  }

  componentDidMount() {
  }

  // 处理表格的列
  dealWithColumnWrap = (columnWrap) => {
    let columns = [];
    for (let colWrap of columnWrap) {
      let col = {};

      if (colWrap.type) {
        switch (colWrap.type) {
          case 'longString':
            col = {
              render: (text, record) =>
                text ?
                  (
                    // -webkit-transition: all 3s;
                    <div style={{
                      transition: 'all .3s',
                      overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap', width: (colWrap.width - 24) + 'px'
                    }}
                      onDoubleClick={(e) => {
                        if (e.target.style.textOverflow) {
                          e.target.style.overflow = null;
                          e.target.style.textOverflow = null;
                          e.target.style.whiteSpace = null;
                          // 强制让此组件重新渲染，控制固定列的高度变化
                          this.forceUpdate(() => { });
                        } else {
                          e.target.style.overflow = 'hidden';
                          e.target.style.textOverflow = 'ellipsis';
                          e.target.style.whiteSpace = 'nowrap';
                          this.forceUpdate(() => { });
                        }
                      }}
                    >
                      {text}
                    </div>
                  )
                  :
                  <span style={{ color: '#e8e8e8' }}> / </span>
            };
            break;
          case 'image':
            col = {
              className: styles.noPaddingCol,
              render: (text, record) =>
                (text || record[colWrap.dataIndex]) ?
                  (
                    Array.isArray(record[colWrap.dataIndex]) ?
                      <a style={{ textDecoration: 'underline', fontWeight: 'bold' }}
                        onClick={() => {
                          let values = [];
                          for (let i of record[colWrap.dataIndex]) {
                            values.push({ title: i[colWrap.imgTitle], src: i[colWrap.imgSrc] });
                          }
                          this.onImageViewClick(values);
                        }} >查 看</a>
                      :
                      <img style={{ width: 30, height: 30, cursor: 'pointer' }} src={record[colWrap.dataIndex]}
                        onClick={() => {
                          let values = [];
                          values.push({ title: colWrap.dataIndex, src: record[colWrap.dataIndex] });
                          this.onImageViewClick(values)
                        }} />
                  )
                  :
                  <span style={{ color: '#e8e8e8' }}> / </span>
            };
            break;
          default:
            break;
        }
      } else {
        col = {
          render: (text, record) =>
            text ?
              <span>{text}</span>
              :
              <span style={{ color: '#e8e8e8' }}> / </span>
        };
      }

      col = {
        align: colWrap.align ? colWrap.align : 'center',

        ...col,
        ...colWrap
      };

      columns.push(col);
    }
    return columns;
  }

  handleRowSelectChange = (selectedRowKeys, selectedRows) => {
    const { onSelectionChange } = this.props;
    this.setState({ selectedRowKeys, selectedRows });

    onSelectionChange(selectedRowKeys, selectedRows);
  }

  cleanSelectedKeys = () => {
    this.handleRowSelectChange([], []);
  }

  render() {
    const { breadcrumbList, selectedRowKeys } = this.state;
    const { columnWrap, dataSource, loading, bordered, size, pagination: paginationProp, needCheckbox, needAlert, onChange } = this.props;

    const columns = this.dealWithColumnWrap(columnWrap);

    const rowSelection = {
      selectedRowKeys,
      onChange: this.handleRowSelectChange,
      getCheckboxProps: record => ({
        disabled: record.disabled,
      }),
      fixed: true,
    };

    const paginationProps = {
      showSizeChanger: true,
      showQuickJumper: true,
      ...paginationProp,
    };

    return (
      <div>
        {
          needAlert &&
          (
            <div className={styles.tableAlert}>
              <Alert
                message={(
                  <div>
                    已选择 <a style={{ fontWeight: 600 }}>{selectedRowKeys.length}</a> 项&nbsp;&nbsp;
                  {/* 总计 <span style={{ fontWeight: 600 }}>{totalCallNo}</span> 项 */}
                    <a onClick={this.cleanSelectedKeys} style={{ marginLeft: 24 }}>清空</a>
                  </div>
                )}
                type="info"
                showIcon
              />
            </div>
          )
        }

        <Table
          className={styles.basicTable}
          loading={loading}
          bordered={!!bordered}
          size={size ? size : 'default'}

          columns={columns}
          dataSource={dataSource}

          rowKey={record => record.key}
          rowSelection={!!needCheckbox ? rowSelection : null}

          pagination={paginationProps}
          onChange={(pagination, filters, sorter) => onChange(pagination, filters, sorter)}

        />
      </div>
    );
  }

}